<template>
   <el-card class="card_box">
        <div class="basic-flex">
            <div>
                <el-link  type="primary" v-for="item in titleList" :key="item.title" @click="changeInfo({value:item.title,url:item.url})" :class="activeName==item.title?'selected-tab-style tab-title':'tab-style  tab-title'">{{ item.title }}</el-link>
            </div>
            <div class="align-center">
                <el-button link type="primary" @click="goTo('/users/usersData')">
                    《返回
                </el-button>
            </div>
        </div>
        <div  v-if="activeName=='会员增长分析'">
            <el-divider style="margin:12px 0"></el-divider>
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="map-card flex">
                        <div class="font-medium title" style="width:20%">城市分布</div>
                        <!-- img(src="/city.svg") -->
                        <div style="height:280px; ">
                            <img :src="getAssetsFile('images/users/city.svg')" /> 
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="map-card flex">
                        <div class="font-medium title" style="width:20%">中国地图</div>
                        <div class="map-style" id="map"></div>
                    </div>
                </el-col>
            </el-row>
        </div>
   </el-card>
   <div  v-if="activeName=='会员增长分析'">
        <el-card  class="card_box">
            <div class="basic-flex">
                <div class="font-medium title">数据展示</div>
                <div class="align-center" @click="refresh">
                    <el-icon><Refresh style="color:#366EF4"/></el-icon>
                    <el-button link type="primary" >刷新</el-button>
                </div>
            </div>
        <div class="padding-top-14">
                <user-statistic :dataObj="list"></user-statistic>
        </div>
        <div id="salesCount" style="width: 100%;height: 400px;"></div>
        </el-card>
   </div>
   
    
</template>
<script setup lang="ts">
import {goTo} from "@/utils/users/pubFun" 
import "@/style/modules/users.scss";
import * as echarts from 'echarts';
import * as chinaJson from "@/utils/users/china.json"
import {getAssetsFile} from "@/utils";
import {allUserPath} from "@/config/paths";
import userStatistic from "@/views/users/components/userStaistic/index.vue";
import {keyName} from '@/utils/users/pubConfig'
const titleList=ref<{title:string,url:string}[]>([
    {title:'会员增长分析',url:'/users/usersAnalyse'},
    {title:'会员消费分析',url:'/users/userConsume'}
])
const activeName=ref<string>('会员增长分析')
function changeInfo({value,url}:{value:string,url:string}){
    // console.log('url',url)
    activeName.value =value
    goTo(url)
}
interface GrowthData{
    all_members:number,
    new_members:number,
    all_vip_to_user:number,
    new_orders:number,
    new_rent_batteries:number,
    all_change_batteries:number,
    all_sales:number,
    month_sales:{x_value:string,y_value:number}[]
}
const growthData=ref<GrowthData>({all_members:0,
    new_members:0,
    all_vip_to_user:0,
    new_orders:0,
    new_rent_batteries:0,
    all_change_batteries:0,
    all_sales:0,
    month_sales:[{x_value:'',y_value:0}]})

onMounted(async()=>{
    const {data} = await baseRequest.get(allUserPath.value)
    growthData.value=data
    echarts.registerMap('china', {geoJSON: chinaJson});
    const mapChart = echarts.init(document.getElementById('map'));
    const mapObj=formatMap()
    mapChart.setOption(mapObj);
    mapChart.on('click',(e)=>{
        const {name}=e
        console.log(name,111111111111);
    }); 
    const myChart = echarts.init(document.getElementById('salesCount'),);
    const obj = formatEchart()
    myChart.setOption(obj);
    window.addEventListener("resize", () => {
        myChart.resize();
        mapChart.resize()
      });
})

function formatMap(){
    return {
        geo: {
            map: 'china',
            zoom: 1.3,
            roam: false,
            itemStyle: {
                //配置正常状态下的样式
                normal: {
                    // borderWidth: 1
                    color:'#88D8FF',
                    // color: 'linear-gradient(180deg, #7AFCFF 0%, #89E7FF 54%, #1AAEFF 100%);', //地图背景色
                    borderColor: '#ffffff', //省市边界线00fcff 516a89
                    borderWidth: 1
                },
                emphasis: {
                    color: '' //悬浮背景
                },
            }
        },
        tooltip:{
            show:false
        },
        label:{show:false},
        series:{
            //涟漪式样
            type:"effectScatter" ,
            coordinateSystem:'geo',
            effectType: "ripple",
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            symbolSize :12,
            data:[
                {name:'上海市',value: [ 121.472644, 31.231706]},
                {name:'成都市',value:[104.06,30.67]},
                {name:'西安市',value:[108.948024,34.263161]}
            ],
            label: {
                show:true,
                formatter: '{b}',
                position: 'right'
            },
            emphasis: {
                label: {
                    show: true
                }
            },
            hoverAnimation: true,
            itemStyle: {
                color: '#1770DA',
                shadowBlur: 10,
                shadowColor: '#1770DA',
            }
           
        }
    }
}

function formatEchart(){
    const {month_sales}= growthData.value
    let obj :{xAxis:{
        data:string[]},
        color:string[],
        yAxis:{
            axisLabel:{
                formatter:(value: any) => string
            }
        },
        legend:{bottom:string,data:string[],type:string},
        tooltip:{},
        series:[{data:number[],type:string,name:string}]}={
            xAxis:{data:[]},
            yAxis:{
                axisLabel:{
                formatter:(value)=>{
                    return `${value/1000} K`
                }
            }
            },
            color:['rgba(0, 82, 217, 1)'],
            tooltip: {},
            
            legend:{ type: 'scroll',bottom: '10',data:['销售额']},
            series:[
                { 
                    data:[],
                    type:'line',
                    name:'销售额'

                }
            ],
            }
    month_sales.forEach(item=>{
        const {x_value,y_value}=item
        obj.xAxis.data.push(x_value)
        obj.series[0].data.push(y_value)
    })
    return obj
}
//排序
const list=computed(()=>{
    let newList:any=[]
    for(let [key,value] of Object.entries(growthData.value)){
        if(isNaN(value)) continue
        newList.push({title:keyName[key],value,span:3})
    }
    newList.sort((first,second)=>{
        if(first.title>second.title){
            return 1
        }
        if(first.title<second.title){
            return -1
        }
        return 0
    })
    //1，3，0，5，4，6，2
    return [newList[1],newList[3],newList[0],newList[5],newList[4],newList[6],newList[2]]
})
function refresh(){
    location.reload()
}
</script>
<style scoped lang="scss">

</style>